<template>
    <div>
        <div class="checkbox" v-for="item in inputDefine.options">
            <label>
                <input type="checkbox" :name="inputDefine.name" :value="item.value" @change="dataChange($event)">
                {{item.displayName}}
            </label>
        </div>
    </div>
</template>

<script>
    export default{
        data(){
            return{
              "myData":[]
            }
        },
        props:{
          inputDefine:{
            type:Object,
            required: true
          },
          elementData:{
            required: true
          }
        },
        methods:{
             "dataChange":function(event){
                 if(event.target.checked){
                   this.myData.push(event.target.value);
                 }else{
                    var idx=this.indexOf(this.myData,event.target.value);
                    if(idx>-1){
                       this.myData.splice(idx,1);
                    }
                 }
                 var dataInfo={"newValue":this.myData}
                 this.$emit('dataChange',this.inputDefine,dataInfo);
             },
             indexOf:function(arr,item){
              for (var i = 0; i < arr.length; i++) {
                    if (arr[i] == item) {
                        return i;
                    }
                }
                return -1;
             }
        }
    }
</script>
